<template>
  <Drawer
    :is-visible="isVisible"
    @close-drawer="(flag) => emitClose(flag)"
    @save-drawer="emitSave"
  >
    <template #header>
      <h3
        v-cloak
        class="fn18 flex-middle active no-select"
      >
        <template v-if="type === EBtnType.add">
          <Plus style="width: 2rem;height: 2rem;margin-right: 5px;"/>
          新增
        </template>
        <template v-if="type === EBtnType.edit">
          <EditPen style="width: 2rem;height: 2rem;margin-right: 5px;"/>
          编辑
        </template>
      </h3>
    </template>
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-suffix="："
      status-icon
      label-width="120px"
    >
      <el-form-item
        label="业务类型"
        prop="businesstype">
        <el-select
          v-model="form.businesstype"
          class="w100"
          clearable
          placeholder="业务类型"
        >
          <el-option
            v-for="item in businessType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="企业名称"
        prop="companyname">
        <el-input
          v-model="form.companyname"
          clearable
          placeholder="请输入企业名称"/>
      </el-form-item>
      <el-form-item
        label="站点名称"
        prop="sitename">
        <el-input
          v-model="form.sitename"
          clearable
          placeholder="请输入站点名称"/>
      </el-form-item>
      <el-form-item
        label="站点编号"
        prop="sitecode">
        <el-input
          v-model="form.sitecode"
          clearable
          placeholder="请输入站点编号"/>
      </el-form-item>
      <el-form-item
        label="所在地"
        prop="area">
        <el-cascader
          v-model="form.area"
          :options="areaTree"
          clearable
          class="w100"
          :props="{
            expandTrigger: 'hover' as const, 
          }"
        />
      </el-form-item>
      <el-form-item
        label="详细地址"
        prop="address">
        <el-input
          v-model="form.address"
          clearable
          placeholder="请输入详细地址"/>
      </el-form-item>
      <el-form-item
        label="站点经度"
        prop="longitude">
        <el-input
          v-model="form.longitude"
          clearable
          placeholder="请输入站点经度"/>
      </el-form-item>
      <el-form-item
        label="站点纬度"
        prop="latitude">
        <el-input
          v-model="form.latitude"
          clearable
          placeholder="请输入站点纬度"/>
      </el-form-item>
      <el-form-item
        label="用户性质"
        prop="userproperty">
        <el-select
          v-model="form.userproperty"
          class="w100"
          clearable
          placeholder="用户性质"
        >
          <el-option
            v-for="item in userproperty"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="用户类别"
        prop="usertype">
        <el-select
          v-model="form.usertype"
          class="w100"
          clearable
          placeholder="用户类别"
        >
          <el-option
            v-for="item in usertype"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-for="(item, index) in form.electrictip"
        :key="index"
        label="用电尖阶段"
        prop="address">
        <el-time-picker
          v-model="form.electrictip[index]"
          is-range
          range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
        <el-icon
          :size="30"
          color="rgba(40, 241, 250, 1)"
          class="ml8 cursor"
          @click="eleTipAdd"
        >
          <CirclePlusFilled />
        </el-icon>
        <el-icon
          v-if="index !== 0"
          :size="30"
          color="rgba(40, 241, 250, 1)"
          class="ml8 cursor"
          @click="() => eleTipDel(index)"
        >
          <DeleteFilled />
        </el-icon>
        <el-icon
          v-else
          :size="30"
          class="ml8"
        ></el-icon>
      </el-form-item>
      <el-form-item
        v-for="(item, index) in form.electricpeak"
        :key="index"
        label="用电峰阶段"
        prop="address">
        <el-time-picker
          v-model="form.electricpeak[index]"
          is-range
          range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
        <el-icon
          :size="30"
          color="rgba(40, 241, 250, 1)"
          class="ml8 cursor"
          @click="elePeakAdd"
        >
          <CirclePlusFilled />
        </el-icon>
        <el-icon
          v-if="index !== 0"
          :size="30"
          color="rgba(40, 241, 250, 1)"
          class="ml8 cursor"
          @click="() => elePeakDel(index)"
        >
          <DeleteFilled />
        </el-icon>
        <el-icon
          v-else
          :size="30"
          class="ml8"
        ></el-icon>
      </el-form-item>
      <el-form-item
        v-for="(item, index) in form.electricflat"
        :key="index"
        label="用电平阶段"
        prop="address">
        <el-time-picker
          v-model="form.electricflat[index]"
          is-range
          range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
        <el-icon
          :size="30"
          color="rgba(40, 241, 250, 1)"
          class="ml8 cursor"
          @click="eleFlatAdd"
        >
          <CirclePlusFilled />
        </el-icon>
        <el-icon
          v-if="index !== 0"
          :size="30"
          color="rgba(40, 241, 250, 1)"
          class="ml8 cursor"
          @click="() => eleFlatDel(index)"
        >
          <DeleteFilled />
        </el-icon>
        <el-icon
          v-else
          :size="30"
          class="ml8"
        ></el-icon>
      </el-form-item>
      <el-form-item
        v-for="(item, index) in form.electriclower"
        :key="index"
        label="用电谷阶段"
        prop="address">
        <el-time-picker
          v-model="form.electriclower[index]"
          is-range
          range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
        <el-icon
          :size="30"
          color="rgba(40, 241, 250, 1)"
          class="ml8 cursor"
          @click="eleLowerAdd"
        >
          <CirclePlusFilled />
        </el-icon>
        <el-icon
          v-if="index !== 0"
          :size="30"
          color="rgba(40, 241, 250, 1)"
          class="ml8 cursor"
          @click="() => eleLowerDel(index)"
        >
          <DeleteFilled />
        </el-icon>
        <el-icon
          v-else
          :size="30"
          class="ml8"
        ></el-icon>
      </el-form-item>
    </el-form>
  </Drawer>
</template>

<script lang="ts" setup>
import { Plus, EditPen, CirclePlusFilled, DeleteFilled } from '@element-plus/icons-vue'
import { form, rules, saveAdd, saveEdit, eleTipDel, eleTipAdd, elePeakAdd, elePeakDel, eleFlatAdd, eleFlatDel, eleLowerAdd, eleLowerDel } from './operate'
import { businessType, userproperty, usertype } from '@/data/select'
import { areaTree } from '@/data/area'
import Drawer from '@/components/Drawer/index.vue'
import { EBtnType } from '@/types/btn'
const props = defineProps<{
  isVisible: boolean
  type: EBtnType,
  handleQuery: Function
}>()
const emits = defineEmits<{
  (e: 'update:visible', flag: boolean): void
}>()
const emitClose = (flag: boolean) => {
  emits('update:visible', flag)
}
const emitSave = () => {
  console.log('form:', form)
  if (props.type === EBtnType.add) saveAdd(props.handleQuery)
  else if (props.type === EBtnType.edit) saveEdit(props.handleQuery)
}
</script>

<style lang="scss" scoped>

</style>
